<template>
  <el-container class="archive_container">
    <div class="archive_card">
      <el-card class="card">
          <el-timeline>
            <el-timeline-item v-for="(blog,key) in Blogs"
                :key="key" :timestamp="blog.create_time.split('-')[0] + '/' + blog.create_time.split('-')[1]" placement="top">
                <h4><router-link :to="'/article/'+blog.id" tag="span" class="art-title">{{blog.title}}</router-link></h4>
                <p>用户'{{blog.author}}' 于 '{{blog.create_time}}' 提交</p>
            </el-timeline-item>
        </el-timeline>
      </el-card>
      <div class="archive_page">
          <el-pagination
            @current-change="handleCurrentChange"
            :background="true"
            layout="prev, pager, next"
            :current-page="currentPage"
            :page-size="pageSize"
            :total="total">
          </el-pagination>
      </div>
    </div>
    <div>
      <W-ArchiveLeft></W-ArchiveLeft>
    </div>
  </el-container>
</template>

<script>
import ArchiveLeft from '../components/section/ArchiveLeft'
export default {
  data () {
    return {
      total: 0,
      currentPage: 1,
      pageSize: 10,
      Blogs: []
    }
  },
  metaInfo: {
    title: '风在哪博客归档页', // set a title
    meta: [{
      name: 'keywords',
      content: '风在哪,Java,Redis,IT,网络,操作系统,leetcode,个人网站,博客网站'
    },
    {
      name: 'description',
      content: '风在哪个人博客网站,热爱编程的学习者,Java后端技术分享,算法知识分享'
    }]
  },
  components: {
    'W-ArchiveLeft': ArchiveLeft
  },
  methods: {
    handleCurrentChange (currentPage) {
      this.$axios.get('/view/blog/getArchiveBlog', {
        params: {
          current: currentPage,
          size: 20
        }
      }).then(response => {
        this.$set(this, 'Blogs', response.data.data)
        this.convertBlog(this.Blogs)
        if (this.Blogs !== null) {
          this.currentPage = Number(response.data.data[0].current)
          this.total = Number(response.data.data[0].total)
          this.pageSize = Number(response.data.data[0].size)
        } else {
          this.currentPage = 0
          this.pageSize = 0
          this.total = 0
        }
      }).catch(error => {
        console.log(error)
      })
    },
    getArchiveBlog () {
      this.$axios.get('/view/blog/getArchiveBlog', {
        params: {
          current: 1,
          size: 20
        }
      }).then(response => {
        this.$set(this, 'Blogs', response.data.data)
        this.convertBlog(this.Blogs)
        if (this.Blogs !== null) {
          this.currentPage = Number(response.data.data[0].current)
          this.total = Number(response.data.data[0].total)
          this.pageSize = Number(response.data.data[0].size)
        } else {
          this.currentPage = 0
          this.pageSize = 0
          this.total = 0
        }
      }).catch(error => {
        console.log(error)
      })
    },
    convertBlog (blogList) {
      var i = 0
      for (; i < blogList.length; i++) {
        var d = new Date(blogList[i].create_time)
        blogList[i].create_time = d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate() + ' ' + d.getHours() +
             ':' + d.getMinutes() + ':' + d.getSeconds()
      }
    }
  },
  mounted () {
    this.getArchiveBlog()
  }
}
</script>

<style lang="less" scoped>
.archive_container{
  margin-left: 6%;
  margin-top: 30px;
}
.archive_card{
  margin-right: 3%;
  width: 69.7%;
}
.card{
  width: 100%;
  margin-bottom: 30px;
}
.archive_page{
  text-align: center;
}
</style>
